<template>
  <div class="main-header" :class="{ 'lang-en': $i18n.locale === 'en' }">
    <div class="main-header-warp">
      <div class="logo-box" @click="$router.push('home')">
        <p>Rebirthealth</p>
        <p>{{ $t("当健康陷入困境，希望从这里开始") }}</p>
      </div>
      <ul class="tab-list">
        <li
          v-for="(item, index) in translatedItems"
          :key="index"
          :class="{ 'active-tab': acTab == index }"
          @click="checkTab(item)"
        >
          <span>{{ item.label }}</span>
        </li>
      </ul>
      <div class="header-right-box">
        <div class="login-btn" @click="goLogin" v-if="!userInfo.id">
          <span>{{ $t("登录/注册") }}</span>
        </div>
        <div class="user-info-box" v-else>
          <el-dropdown trigger="click" @command="handleUser">
            <span class="el-dropdown-link">
              <img v-if="userInfo.avatar" :src="userInfo.avatar" alt="" />
              <img v-else src="../assets/img/head.jpg" alt="" />
              <span>{{ userInfo.nickname }}</span>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="userInfo">{{
                $t("个人中心")
              }}</el-dropdown-item>
              <el-dropdown-item command="logout">{{
                $t("退出登录")
              }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="language-box">
          <el-dropdown trigger="click" @command="handleLanguage">
            <span class="el-dropdown-link">
              <i class="el-icon-caret-bottom"></i>
              {{ $i18n.locale == "en" ? "English" : "中文" }}
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="zh">{{ $t("中文") }}</el-dropdown-item>
              <el-dropdown-item command="en">English</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tabList: [
        {
          nameKey: "首页",
          index: "/home",
          router: "/home",
        },
        {
          nameKey: "任务广场",
          index: "/mission",
          router: "/mission",
        },
        {
          nameKey: "成功案例",
          index: "/success",
          router: "/success",
        },
        {
          nameKey: "关于我们",
          index: "/us",
          router: "/us",
        },
      ],
      acTab: null,
    };
  },
  watch: {
    $route(to, from) {
      // 可以在这里执行路由变化后的逻辑
      let index = this.tabList.findIndex((c) => c.index == to.meta.tabIndex);
      if (index != -1) {
        this.acTab = index;
      } else {
        this.acTab = null;
      }
    },
  },
  computed: {
    translatedItems() {
      return this.tabList.map((item) => ({
        ...item,
        label: this.$t(item.nameKey),
      }));
    },
    userInfo() {
      if (this.$store.state.userInfo) {
        return JSON.parse(this.$store.state.userInfo);
      } else {
        return {};
      }
    },
  },
  mounted() {
    let index = this.tabList.findIndex(
      (c) => c.index == this.$route.meta.tabIndex
    );
    if (index != -1) {
      this.acTab = index;
    }
  },
  methods: {
    handleLanguage(command) {
      if (this.$i18n.locale != command) {
        this.$i18n.locale = command;
        localStorage.setItem("i18nLocale", command);
        window.location.reload();
      }
    },
    handleUser(command) {
      if (command == "logout") {
        this.$store.commit("DEL_USER");
        this.$store.commit("DEL_TOKEN");
        this.$store.commit("DEL_REF_TOKEN");
        this.$store.commit("DEL_USERID");
        this.$store.commit("DEL_TIMER");
        this.$router.push("/login");
      } else if (command == "userInfo") {
        this.$store.commit("SET_PERSONTAB", 0);
        this.$router.push("/personcenter");
      }
    },
    checkTab(item) {
      if (this.$route.path != item.router) {
        this.$router.push(item.router);
      }
    },
    goLogin() {
      this.$router.push("/login");
    },
  },
};
</script>
<style lang="scss" scoped>
$my-theme-color: #db3a1b;
.main-header {
  height: 7.56rem;
  width: 77.33rem;
  margin: 1.33rem auto 0;
  background: rgba(35, 51, 83, 0.65);
  border-radius: 0.22rem 0.22rem 0.22rem 0.22rem;
  border: 0.06rem solid #253450;
  z-index: 1;
  .main-header-warp {
    display: flex;
    height: 100%;
    align-items: center;
    color: #fff;
    justify-content: space-between;
    .logo-box {
      display: flex;
      justify-content: center;
      flex-direction: column;
      margin-left: 1.33rem;
      // img {
      //   width: 16.11rem;
      //   height: 4rem;
      // }
      p:nth-child(1) {
        font-size: 2.67rem;
        color: #ffffff;
        line-height: 4rem;
        font-weight: 800;
      }
      p:nth-child(2) {
        font-size: 1rem;
        color: #d4d8dc;
        margin-top: -0.5rem;
        letter-spacing: 1px;
      }
    }
    .tab-list {
      flex: 1;
      display: flex;
      height: 100%;
      margin-left: 3.56rem;
      align-items: center;
      li {
        text-align: center;
        height: 3.06rem;
        line-height: 3.06rem;
        margin-right: 1rem;
        padding: 0 1.67rem;
        cursor: pointer;
        span {
          font-size: 1rem;
          color: #ffffff;
        }
        &:hover,
        &.active-tab {
          background: linear-gradient(96deg, #045fb2 1%, #339eff 100%);
          border-radius: 4.56rem 4.56rem 4.56rem 4.56rem;
        }
      }
    }
    .header-right-box {
      display: flex;
    }
    .login-btn {
      height: 3.06rem;
      border-radius: 4.56rem 4.56rem 4.56rem 4.56rem;
      border: 0.06rem solid #c4e3ff;
      padding: 0 1rem;
      line-height: 3.06rem;
      margin-right: 1.33rem;
      font-size: 1rem;
      span {
        cursor: pointer;
        font-size: 1rem;
        color: #c4e3ff;
      }
    }
    .user-info-box {
      margin-right: 1.33rem;
      .el-dropdown-link {
        height: 3.06rem;
        border-radius: 4.56rem 4.56rem 4.56rem 4.56rem;
        border: 0.06rem solid #c4e3ff;
        padding: 0 1rem;
        line-height: 3.06rem;
        font-size: 1rem;
        display: flex;
        align-items: center;
        color: #c4e3ff;
        cursor: pointer;
        img {
          width: 1.08rem;
          height: 1.08rem;
          margin-right: 0.56rem;
        }
      }
    }
    .language-box {
      margin-right: 1.33rem;
      .el-dropdown-link {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 3.06rem;
        padding: 0 1rem;
        border-radius: 4.56rem 4.56rem 4.56rem 4.56rem;
        border: 0.06rem solid #c4e3ff;
        font-size: 1rem;
        color: #c4e3ff;
        i {
          font-size: 0.6rem;
          margin-right: 0.2rem;
          font-size: 1rem;
          color: #c4e3ff;
        }
      }
      .el-dropdown {
        cursor: pointer;
      }
    }
  }
}
.lang-en.main-header .main-header-warp .logo-box p[data-v-6d71ba7e]:nth-child(1) {
  font-family: Impact-Regular;
}
</style>
